<template>
  <div>
    <div class="sing">
      <div class="menu">
        <menu-list :menu="menu1" title="全部" v-model="m1Params"></menu-list>
        <menu-list :menu="menu2" title="分类(默认热门)" v-model="m2Params"></menu-list>
      </div>

      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isLoading" loading-text="拼命加载中" @refresh="onRefresh">
        <!-- 歌手列表 -->
        <ul class="content">
          <li v-for="item in data" :key="item.id" class="item" @click="$router.push('/singers/' + item.id)">
            <img :src="item.picUrl" v-lazy="item.picUrl" alt="" />
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </van-pull-refresh>
    </div>
    <transition enter-active-class="fly-in" leave-active-class="fly-out">
      <router-view />
    </transition>
  </div>
</template>

<script setup>
import MenuList from './modules/menu-list.vue'
import {getRandom} from '@/utils'
import { getCurrentInstance, ref,watch } from 'vue'
let { proxy } = getCurrentInstance()
const types = [
  { label: '男', id: 1 },
  { label: '女', id: 2 },
  { label: '组合', id: 3 }
]
const areas = [
  { label: '华语', id: 7 },
  { label: '欧美', id: 96 },
  { label: '日本', id: 8 },
  { label: '韩国', id: 16 },
  { label: '其他', id: 0 }
]
let menu1 = ref([{ label: '热门', area: -1, type: -1 }])
let menu2 = ref([{ label: '全部', initial: -1 }])
let m1Params = ref({ area: -1, type: -1 })
let m2Params = ref({ initial: -1 })
let isLoading = ref(false)
let data = ref(null)
areas.map((area) => {
  types.map((type) => {
    menu1.value.push({ label: area.label + type.label, area: area.id, type: type.id })
  })
})
menu2.value.push(
  ...new Array(26).fill(65).map((item, index) => ({
    label: String.fromCharCode(item + index),
    initial: String.fromCharCode(97 + index)
  }))
)
watch([m1Params,m2Params],(n)=>{
  console.log(n[0])
    getList()
})
function onRefresh() {
  isLoading.value = true
  getList(getRandom())
}
function getList(offset = 0) {
  proxy.$showLoading()
  proxy.$api.home.getSongList({ ...m1Params.value, ...m2Params.value, offset }).then((res) => {
    data.value = res.artists
    isLoading.value=false
    proxy.$hideLoading()
  })
}
getList()
</script>

<style lang="less" scoped>
.menu {
  position: fixed;
  top: 90px;
  left: 0;
  right: 0;
  z-index: 100;
}
.van-pull-refresh {
  padding-top: 90px;
  /deep/ .van-loading,
  /deep/ .van-loading__text {
    color: @theme-color;
  }
}
.content {
  li {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1.5px solid rgb(228, 228, 228);
    img {
      width: 42px;
      height: 42px;
      border-radius: 4px;
    }
    span {
      font-size: 14px;
      margin-left: 15px;
      color: #666;
    }
  }
}
</style>
